<template>
	<view>
		<u-navbar :is-back="false" title="聊天">
			<view class="navbar-right" slot="right">
				<view class="right-item">
					<image src="../../static/img/chat/sousuo3.png"></image>
				</view>
				<view class="right-item">
					<image src="../../static/img/chat/zengjia.png"></image>
				</view>
			</view>
		</u-navbar>
		<uni-list :border="false">
			<uni-list-chat v-for="item in listData" :key="item.id" :title="item.author_name" :avatar="item.cover" :note="item.title" badge-positon="left" :badge-text="item.text">
				<view class="chat-custom-right">
					<text class="chat-custom-text">晚上7:23</text>
				</view>
			</uni-list-chat> 
		</uni-list>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				UNITS: {
					'年': 31557600000,
					'月': 2629800000,
					'天': 86400000,
					'小时': 3600000,
					'分钟': 60000,
					'秒': 1000
				},
				listData: []
			};
		},
		onLoad() {
				this.getList()
			},
			methods: {
				onClick() {
					uni.showToast({
						title: '列表被点击'
					})
				},
				avatar(count) {
					let arr = []
					this.avatarList.forEach((item, index) => {
						if (index < count) {
							arr.push(item)
						}
					})
					return arr
				},
				getList() {
					var data = {
						column: 'id,post_id,title,author_name,cover,published_at' //需要的字段名
					};
		
					uni.request({
						url: 'https://unidemo.dcloud.net.cn/api/news',
						data: data,
						success: data => {
							if (data.statusCode == 200) {
								let list = this.setTime(data.data);
								list = this.reload ? list : this.listData.concat(list);
								list.map(item => {
									item.text = Math.floor(Math.random() * (1 - 20) + 20)
									return item
								})
								this.listData = this.getRandomArrayElements(list, 3)
							}
						},
						fail: (data, code) => {
							console.log('fail' + JSON.stringify(data));
						}
					});
				},
				getRandomArrayElements(arr, count) {
					var shuffled = arr.slice(0),
						i = arr.length,
						min = i - count,
						temp, index;
					while (i-- > min) {
						index = Math.floor((i + 1) * Math.random());
						temp = shuffled[index];
						shuffled[index] = shuffled[i];
						shuffled[i] = temp;
					}
					return shuffled.slice(min);
				},
				setTime(items) {
					var newItems = [];
					items.forEach(e => {
						newItems.push({
							author_name: e.author_name,
							cover: e.cover,
							id: e.id,
							post_id: e.post_id,
							published_at: this.format(e.published_at),
							title: e.title
						});
					});
					return newItems;
				},
				format(dateStr) {
					var date = this.parse(dateStr)
					var diff = Date.now() - date.getTime();
					if (diff < this.UNITS['天']) {
						return this.humanize(diff);
					}
					var _format = function(number) {
						return (number < 10 ? ('0' + number) : number);
					};
					return date.getFullYear() + '-' + _format(date.getMonth() + 1) + '-' + _format(date.getDate()) + ' ' +
						_format(date.getHours()) + ':' + _format(date.getMinutes());
				},
				parse(str) { //将"yyyy-mm-dd HH:MM:ss"格式的字符串，转化为一个Date对象
					var a = str.split(/[^0-9]/);
					return new Date(a[0], a[1] - 1, a[2], a[3], a[4], a[5]);
				},
		
			}
		
	}
</script>

<style lang="scss">
.navbar-right {
		margin-right: 24rpx;
		display: flex;
		align-items: center;
		.right-item{
			margin-left: 30rpx;
			image{
				width: 40rpx;
				height: 40rpx;
			}
		}
}
/* 头条小程序组件内不能引入字体 */
	/* #ifdef MP-TOUTIAO */
	@font-face {
		font-family: uniicons;
		font-weight: normal;
		font-style: normal;
		src: url("~@/static/uni.ttf") format("truetype");
	}

	/* #endif */
	/* #ifndef APP-NVUE */
	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #efeff4;
		min-height: 100%;
		height: auto;
	}

	view {
		font-size: 14px;
		line-height: inherit;
	}

	.example {
		padding: 0 15px 15px;
	}

	.example-info {
		padding: 15px;
		color: #3b4144;
		background: #ffffff;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		padding: 0;
		font-size: 14px;
		background-color: #ffffff;
	}

	/* #endif */
	.example {
		padding: 0 15px;
	}

	.example-info {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		padding: 15px;
		color: #3b4144;
		background-color: #ffffff;
		font-size: 14px;
		line-height: 20px;
	}

	.example-info-text {
		font-size: 14px;
		line-height: 20px;
		color: #3b4144;
	}

	.example-body {
		flex-direction: column;
		padding: 15px;
		background-color: #ffffff;
	}

	.word-btn-white {
		font-size: 18px;
		color: #FFFFFF;
	}

	.word-btn {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		border-radius: 6px;
		height: 48px;
		margin: 15px;
		background-color: #007AFF;
	}

	.word-btn--hover {
		background-color: #4ca2ff;
	}

	.chat-custom-right {
		flex: 1;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-end;
	}

	.chat-custom-text {
		font-size: 12px;
		color: #999;
	}

</style>
